<template>
  <div>
    <zeda-dialog
      v-model="visible"
      width="1200px"
      :title="type == 0 ? '查看详情' : type == 1 ? '申报' : '审批'"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="info" :rules="rules">
        <Title name="基本信息" :line="true">
          <desc-base-info
            :data="info"
            :colnum-info="baseInfo"
            align="right"
            :no-line-height="true"
            label-width="120px"
            class="base-info"
          >
            <template slot="auditStatus">
              <dict-tag
                :options="dict.type.energy_budget_manage_audit_status"
                :value="info.auditStatus"
              />
            </template>
            <template slot="energyType">
              <dict-tag
                :options="dict.type.energy_type"
                :value="info.energyType"
              />
            </template>
            <template slot="targetType">
              <dict-tag
                :options="dict.type.target_type"
                :value="info.targetType"
              />
            </template>
            <template slot="subsidyVal">
              <div v-if="![0].includes(info.auditStatus) || type === 0">
                {{ info.subsidyVal }} 元
              </div>
              <el-form-item v-else prop="subsidyVal">
                <el-input
                  size="small"
                  placeholder="请输入电费补贴"
                  v-model="info.subsidyVal"
                  maxlength="13"
                  @input="(value) => keyFixAmount(value, info, 'subsidyVal')"
                >
                  <template slot="append">
                    元
                    <el-popover
                      placement="top-start"
                      title="备注"
                      trigger="hover"
                    >
                      去年同期实际能耗 *
                      （变更后峰谷平均单价/额度在用峰谷平均单价 - 1）
                      <i slot="reference" class="el-icon-info"></i>
                    </el-popover>
                  </template>
                </el-input>
              </el-form-item>
            </template>
            <template slot="carbonNeutral">
              <div v-if="![0].includes(info.auditStatus) || type === 0">
                {{ info.carbonNeutral }} 元
              </div>
              <el-form-item v-else prop="carbonNeutral">
                <el-input
                  size="small"
                  placeholder="请输入碳中和预算"
                  v-model="info.carbonNeutral"
                  maxlength="13"
                  @input="(value) => keyFixAmount(value, info, 'carbonNeutral')"
                >
                  <template slot="append">
                    元
                    <el-popover
                      placement="top-start"
                      title="备注"
                      trigger="hover"
                    >
                      根据本单位实际能耗比额度分配基准值超支部分碳排量，建议购买清洁能源、绿色电力、碳汇量的成本，计算到来年本单位的财政预算中。
                      <i slot="reference" class="el-icon-info"></i>
                    </el-popover>
                  </template>
                </el-input>
              </el-form-item>
            </template>
          </desc-base-info>
        </Title>
        <Title name="预算24节气跟踪" :line="false" class="mt20">
          <el-table
            :data="info.energyBudgetManageDetailVoList"
            border
            height="300"
          >
            <el-table-column
              prop="solarTermsName"
              label="节气"
              min-width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="budgetTime"
              label="预算年月"
              min-width="150"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="budgetSolarTerms"
              label="节气分配预算Y（F*K）（元）"
              min-width="200"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="solarTermsRatio"
              label="节气分配额度K（%）"
              min-width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.solarTermsRatio | dictFee }}
              </template>
            </el-table-column>
            <el-table-column
              prop="solarTermsStartTime"
              label="起止日期"
              min-width="160"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="solarTermsEndTime"
              label="截止日期"
              min-width="160"
              align="center"
            >
            </el-table-column>
          </el-table>
        </Title>

        <el-form-item
          label-width="100px"
          v-if="[2, 3].includes(type)"
          label="审批意见"
          prop="auditOpinion"
        >
          <el-input
            type="textarea"
            :disabled="type === 0"
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-model="info.auditOpinion"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="mt20"
          v-else
          label="申报理由"
          prop="declareContent"
          label-width="100px"
        >
          <el-input
            type="textarea"
            :disabled="type === 0"
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-model="info.declareContent"
          ></el-input>
        </el-form-item>
      </el-form>
      <form-button
        slot="footer"
        :show-submit-button="false"
        @cancel="handleClose"
      >
        <template>
          <el-button
            v-if="[2, 3].includes(type) && type !== 0"
            type="primary"
            @click="handleSubmit(2)"
            >通 过</el-button
          >
          <el-button
            v-if="[2, 3].includes(type) && type !== 0"
            type="warning"
            @click="handleSubmit(3)"
            >驳 回</el-button
          >
          <el-button
            v-if="type == 1 && type !== 0"
            type="primary"
            size="small"
            @click="handleSubmit(1)"
            >申报</el-button
          >
        </template></form-button
      >
    </zeda-dialog>
  </div>
</template>
<script>
import { detail, audit } from "@/api/quota/budget";
import FormButton from "@/components/FormButton";
import { mul, formatDate, replaceDigit } from "@/utils/index";
export default {
  dicts: ["energy_type", "target_type", "energy_budget_manage_audit_status"],
  components: {
    FormButton,
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: [String, Number], default: "" },
    type: { type: Number, default: 0 },
  },
  data() {
    return {
      info: {
        declareContent: "",
        auditOpinion: "",
      },
      rules: {
        subsidyVal: [
          {
            required: true,
            message: "请输入电费补贴",
            trigger: "blur",
          },
        ],
        carbonNeutral: [
          {
            required: true,
            message: "请输入碳中和预算",
            trigger: "blur",
          },
        ],
        declareContent: [
          {
            required: true,
            message: "请输入申报理由",
          },
        ],
        auditOpinion: [
          {
            required: true,
            message: "请输入审批意见",
          },
        ],
      },
    };
  },
  filters: {
    dictFee(val) {
      const text = val ? mul(val, 100) + "%" : "";
      return text;
    },
    formatTime(val) {
      const text = val ? formatDate(val) : "";
      return text;
    },
  },
  computed: {
    baseInfo({ info }) {
      let arr = [];
      arr = [
        {
          label: "用能单位",
          prop: "sysDeptName",
          colNum: 4,
        },
        { label: "预算年度", prop: "budgetYear", colNum: 4, unit: "年" },
        { label: "能耗种类", prop: "energyType", colNum: 4 },
        { label: "指标类型", prop: "targetType", colNum: 4 },
        { label: "版本号", prop: "priceManageVersion", colNum: 4 },
        {
          label: "预算电费",
          prop: "budgetMoney",
          colNum: 4,
          unit: "元",
        },
        { label: "用能人数", prop: "unitPeople", colNum: 4, unit: "人" },
        { label: "用能面积", prop: "unitArea", colNum: 4, unit: "m2" },
        {
          label: "能耗实际分配额度",
          prop: "quotaAllocationVal",
          colNum: 4,
          unit: "kwh/m2",
        },
        { label: "电单价M", prop: "energyPriceAvg", colNum: 4, unit: "元/kwh" },
        { label: "申报状态", prop: "auditStatus", colNum: 4 },

        { label: "申报时间", prop: "declareTime", colNum: 4 },
        { label: "电费补贴", prop: "subsidyVal", colNum: 2 },
        { label: "碳中和预算", prop: "carbonNeutral", colNum: 2 },
      ];
      return arr;
    },
  },
  watch: {
    visible(value) {
      if (value && String(this.id).length > 0) {
        this.getInfo();
      }
    },
  },
  methods: {
    getInfo() {
      const that = this;
      detail(that.id)
        .then((res) => {
          if (res.code === 700) {
            that.$message.warning(res.msg);
            return false;
          }
          this.info = res.data;
          this.$refs["form"].resetFields();
        })
        .catch((err) => {
          this.info = {};
          // this.$message.error("系统错误,请联系管理员!300085");
        });
    },
    keyFixAmount(value, item, key) {
      item[key] = replaceDigit(value, 2);
    },
    /** 申报操作 */
    handleSubmit(falge) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = {
            ...this.info,
            auditEvent: falge,
          };
          audit(data)
            .then((res) => {
              if (res.code === 700) {
                this.$message.warning(res.msg);
                return false;
              }
              this.$message.success("操作成功");
              this.handleClose(true);
            })
            .catch((err) => {
              this.$store.commit("app/updateApiCount");
              // this.$message.error("系统错误,请联系管理员!300084");
            });
        }
      });
    },
    handleClose(status) {
      this.$refs["form"].resetFields();
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 0 !important;
}
</style>
